<template>
	<view class="content">
		<view class="icon-login">
			<view class="left">
				<u-avatar size="40" fontSize="12" randomBgColor></u-avatar>
				<uni-title :title="titlelogin" color="white"></uni-title>
			</view>

			<view class="right">
				<button
					style="font-size: 13px; width: 200px; height: 30px; border:none; color:white; border-color: #00ACBD; background-color: #00ACBD;"
					@click="onlogin()">切换账号</button>
				<uni-icons type="right" size="20" color="#fff"></uni-icons>
			</view>
		</view>

		<view class="onxing" @click="onzheng()">
			<uni-icons type="camera" size="30" color="#00ACBD"></uni-icons>
			<uni-title title="扫描证件添加" color="#00ACBD"></uni-title>
		</view>
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<view class="onform">
			<u--form labelPosition="left" :model="model1" ref="uForm">
				<u-form-item label="乘客类型" prop="userInfo.chenren" borderBottom ref="item1" required="true"
					labelWidth="100" @click="showSex = true;">
					<u--input v-model="model1.userInfo.chenren" disabled disabledColor="#ffffff" placeholder="请选择乘客类型"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="姓名" prop="userInfo.chencheren" borderBottom ref="item1" required="true"
					labelWidth="100">
					<u--input v-model="model1.userInfo.chencheren" border="none"></u--input>
				</u-form-item>

				<u-form-item label="证件类型" prop="userInfo.leixing" borderBottom ref="item1" required="true"
					labelWidth="100" @click="showSexes = true;">
					<u--input v-model="model1.userInfo.leixing" disabled disabledColor="#ffffff" placeholder="请选择证件类型"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="证件号码" prop="userInfo.haoma" borderBottom ref="item1" required="true"
					labelWidth="100">
					<u--input v-model="model1.userInfo.haoma" border="none"></u--input>
				</u-form-item>
				<u-form-item label="手机号码" prop="userInfo.shoujihao" borderBottom ref="item1" required="true"
					labelWidth="100">
					<u--input v-model="model1.userInfo.shoujihao" border="none"></u--input>
				</u-form-item>
				<!-- 			<u-form-item
         						label="性别"
         						prop="userInfo.sex"
         						borderBottom
         						@click="showSex = true; hideKeyboard()"
         						ref="item1"
         				>
         					<u--input
         							v-model="model1.userInfo.sex"
         							disabled
         							disabledColor="#ffffff"
         							placeholder="请选择性别"
         							border="none"
         					></u--input>
         					<u-icon
         							slot="right"
         							name="arrow-right"
         					></u-icon>
         				</u-form-item> -->
			</u--form>

			<u-action-sheet :show="showSex" :actions="actions" title="请选择" @close="showSex = false" @select="sexSelect">
			</u-action-sheet>

			<u-action-sheet :show="showSexes" :actions="actionse" title="请选择" @close="showSexes = false"
				@select="sexSelects">
			</u-action-sheet>
			<view>
				为配合疫情防控工作，需提供每名乘客的 <title style="color: red;">本人手机号</title> ，老人或无手机号的乘客，可填写亲友手机号
			</view>
		</view>

		<uni-title title="本次购票服务由八维票务提供" color="#ccc" align="center"></uni-title>
		<button type="primary" style="margin-top: 30px;" @click="sumit()">提交</button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				onbian: false,
				showSex: false,
				showSexes: false,
				model1: {
					userInfo: {
						chenren: "成人票",
						chencheren: '',
						leixing: '中国大陆身份证',
						haoma: "141025323215522268",
						shoujihao: "15732325664"
					},
				},
				actions: [{
						name: '成人票',
					},
					{
						name: '学生票',
					}
				],
				actionse: [{
						name: "中国大陆身份证",
					},
					{
						name: "中国港澳台身份证"
					}
				],
				radio: '',
				switchVal: false
			}
		},
		onLoad(option) {
			let _this = this
			// 编辑
			if (option.itemdata) {
				console.log('option', option.itemdata)
				let codata = decodeURIComponent(option.itemdata)
				let jsondeta = JSON.parse(codata)
				console.log('jsondeta', jsondeta)
				_this.onbian = true
				_this.model1.userInfo.chencheren = jsondeta.chencheren
			} else {
				_this.onbian = false
				_this.model1.userInfo = {}
			}
			if (option.codedata) {
				_this.onbian = false
				// console.log('身份信息-----', option.codedata)
				let jsondata = decodeURIComponent(option.codedata)
				let data = JSON.parse(jsondata)
				console.log('身份信息-----', data)
				console.log('身份信息-----', data.公民身份号码.words)
				_this.model1.userInfo.chenren = '成人票'
				_this.model1.userInfo.haoma = data.公民身份号码.words
				_this.model1.userInfo.chencheren = data.姓名.words
				_this.model1.userInfo.leixing = "中国大陆身份证"
			}

		},
		methods: {
			sexSelect(e) {
				console.log('e.name', e.name)
				this.model1.userInfo.chenren = e.name
				this.$refs.uForm.validateField('userInfo.chenren')
			},
			sexSelects(e) {
				console.log('e.name', e.name)
				this.model1.userInfo.leixing = e.name
				this.$refs.uForm.validateField('userInfo.leixing')
			},
			sumit() {
				let _this = this
				// 编辑
				if (_this.onbian) {
					let userInfo = _this.model1.userInfo
					let jsonde = JSON.stringify(userInfo)
					let codedata = encodeURIComponent(jsonde)
					uni.navigateTo({
						url: "/pages/XinZen/XinZen?datades=" + codedata,
					})
				} else {
					// 新增
					let userInfo = _this.model1.userInfo
					let jsonde = JSON.stringify(userInfo)
					let codedata = encodeURIComponent(jsonde)
					uni.navigateTo({
						url: "/pages/XinZen/XinZen?xindata=" + codedata,

					})
				}

			},
			onzheng() {
				let _this = this
				uni.navigateTo({
					url: "/pages/caomiao/caomiao"
				})

			}
		}
	}
</script>

<style lang="scss">
	html,
	body {
		width: 100%;
		height: 100%;
	}

	.content {
		width: 100%;
		height: 100%;
		background-color: #F5F4F5;

	}

	.icon-login {
		width: 100%;
		height: 60px;
		background-color: #00ACBD;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left {
			width: 80px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.right {
			width: 120px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.onxing {
		width: 90%;
		height: 60px;
		background-color: white;
		border-radius: 10px;
		border-color: #ccc;
		margin-left: 15px;
		box-shadow: 0px 0px 1px 1px #ccc inset;
		margin-top: 15px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.onform {
		width: 90%;
		height: 300px;
		background-color: white;
		margin-left: 17px;
		margin-top: 15px;
		border-radius: 10px;
	}
</style>